<!--
 * @Description:列表带搜索和分页
 * @Version: 2.0
 * @Autor: kafei
 * @Date: 2021-11-29 15:24:12
 * @LastEditors: kafei
 * @LastEditTime: 2021-12-06 15:29:54
-->
<template>
  <div class="tableSearch">
    <FormSearch :item-data="itemData" @search="searchFun" />
    <buttonConfig :button-data="buttonData" v-on="$listeners" />
    <div v-loading="loading" class="tableSearch__bussinessTable">
      <bussinessTable
        ref="bussinessTable"
        :column-data="columnData"
        :table-data="tableData"
        :pagination="paginationConfig"
        @pagination="paginationFun"
      >
        <template
          v-for="item in cIsTemplate"
          :slot="item.props"
          slot-scope="{ row }"
        >
          <slot :name="item.props" :row="row" :props="item.props" />
        </template>
      </bussinessTable>
    </div>
  </div>
</template>

<script>
import FormSearch from "./FormSearch/index.vue";
import ButtonConfig from "@/components/ButtonConfig/index.vue";
import bussinessTable from "@/components/bussinessTable/index.vue";
export default {
  name: "TableSearch",
  components: {
    FormSearch,
    ButtonConfig,
    bussinessTable
  },
  props: {
    immediately: {
      // 是否立刻执行
      type: Boolean,
      default: true
    },
    itemData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    buttonData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    columnData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    api: {
      type: Function,
      default: undefined
      // getUserByDeptId
    },
    cb: {
      type: Function,
      default: undefined
    }
  },
  data() {
    return {
      tableData: [],
      params: {
        page: 1,
        size: 10
      },
      loading: false,
      paginationConfig: {
        total: 0
      }
    };
  },
  computed: {
    cIsTemplate() {
      return this.columnData.filter((v) => v.isTemplate);
    }
  },
  created() {
    this.immediately && this.getList();
  },
  methods: {
    searchFun(formData) {
      const params = {
        page: 1,
        size: 10,
        ...formData
      };
      this.setListTable(params);
    },
    refreshList() {
      const params = this.$refs.bussinessTable.getPagination();
      this.setListTable(params);
    },
    paginationFun(params) {
      // this.setQuery(params)
      params.size = params.limit;
      this.setListTable(params);
    },
    setQuery(params) {
      this.params = Object.assign({}, this.params, params);
    },
    async setListTable(params) {
      this.setQuery(params);
      this.getList();
    },
    handleParamsFun(params) {
      for (const key in params) {
        if (params[key] && Array.isArray(params[key])) {
          params[key] = params[key].join(",");
        }
      }
      return params;
    },
    async getList() {
      if (!this.api) {
        return;
      }
      this.loading = true;
      const handleParams = this.handleParamsFun(this.params);
      console.log(handleParams, "handleParams");
      const res = await this.api(handleParams);
      if (res.code === "0") {
        const { result, ...reset } = res.data;
        this.tableData = this.cb ? this.cb(result) : result;
        this.paginationConfig = { ...this.paginationConfig, ...reset };
      }
      this.loading = false;
    }
  }
};
</script>

<style></style>
